import { XoProTable } from '@/components/XoProTable'
import React, { useState } from 'react';
import {
  DrawerForm, ProFormSelect
} from '@ant-design/pro-form';
import StudentInfo from '../StudentInfo';
import styles from './index.less';
import { ActionType, ProColumns } from '@ant-design/pro-table';
import type { RecordsParams } from '@/services/records';
import { getComRecordsList } from '@/services/records';
import { history } from 'umi';
import moment from 'moment';
import { Button, message } from 'antd';
import { onRequestNickName } from '@/utils/requestPhone';
import { duanOption } from '../StudentInfo/Record';
import { courseItemExport } from '@/services/situation';
import { useRef } from 'react';

export default function ComRecord() {
  const [ids, setUserId] = useState<any>();
  const [idx, setIndex] = useState<any>();
  const [ids3, setId] = useState<any>();
  const [itemList, setRecordsList] = useState<RecordsParams[]>();

  const [purpose, setPurpose] = useState<any>();
  const [shiwForm, setShowForm] = useState<boolean>(false);
  const [loading, setLoading] = useState<boolean>(false);
  const [phoneValue, setPhoneValue] = useState<any>();
  const { id } = history.location.query || {}

  const showForm = async (record: any, index: number) => {
    setIndex(index)
    setShowForm(true);
  }
  const showObject = (e?: string) => {
    if (e == '1') { return '爸爸' }
    else if (e == '2') { return '妈妈' }
    else if (e == "3") { return '爷爷' }
    else if (e == '4') { return '奶奶' }
    else if (e == '5') { return '姥姥' }
    else if (e == '6') { return '姥爷' }
    else if (e == '7') { return '其他' }
    else { return '-' }
  }
  const showPurpose = (ee?: string) => {
    if (ee == '1') { return '日常沟通' }
    else if (ee == '2') { return '续报沟通' }
    else if (ee == '3') { return '退费沟通' }
    else if (ee == '4') { return '特殊情况沟通' }
    else { return; }
  }
  const columns: ProColumns<RecordsParams>[] = [
    {
      dataIndex: 'uid',
      title: '用户ID',
      search: false,
      ellipsis: true,
      fixed: 'left',
      width: 80,
    },
    {
      dataIndex: 'nickname',
      title: '用户昵称',
      ellipsis: true,
      search: false,
      align: 'center',
      render: (text: any, record: any, index: number) => (
        <a onClick={() => showForm(record, index)}>{record?.nickname}</a>
      )
    },
    {
      dataIndex: 'realName',
      title: '真实姓名',
      search: false,
      ellipsis: true,

      align: 'center',
      // width: 120,
    },
    {
      dataIndex: 'phone',
      title: '手机号',
      align: 'center',
      ellipsis: true,
      search: false,

    },
    {
      dataIndex: 'groupName',
      title: '班级',
      align: 'center',
      search: false,
      ellipsis: true,
    },
    {
      dataIndex: 'teacherName',
      title: '辅导老师',
      search: false,
      ellipsis: true,
      align: 'center',
    },
    {
      dataIndex: 'object',
      title: '沟通对象',
      search: false,
      align: 'center',
      ellipsis: true,
      render: (text: any, record: any) => {
        return showObject(record.object)
      }

      // width: 150,
    },
    {
      dataIndex: 'nicknamePhone',
      hideInTable: true,
      title: '昵称/手机号',
      ellipsis: true,
      align: 'center',
      renderFormItem: () => {
        return (
          <div >
            <ProFormSelect
              wrapperCol={{ span: 24 }}
              labelCol={{ span: 24 }}
              name="uid"
              showSearch
              labelAlign="left"
              debounceTime={500}
              placeholder="请选择"
              fieldProps={{
                onChange: (val) => setPhoneValue(val)
              }}
              request={onRequestNickName}
            />
          </div>
        );
      },
    },
    {
      dataIndex: 'purpose',
      title: '沟通目的',
      align: 'center',
      valueType: 'select',
      fieldProps: {
        onChange: (val: any) => setPurpose(val)
      },
      valueEnum: {
        1: '日常沟通',
        2: '续报沟通',
        3: '退费沟通',
        4: '特殊情况沟通',
      },
      // width: 150,
      ellipsis: true,
      render: (text: any, record: any) => (
        showPurpose(record.purpose)
      )
    },
    {
      dataIndex: 'content',
      title: '沟通内容',
      search: false,
      align: 'center',
      ellipsis: true,
      // width: 200,
    },
    {
      dataIndex: 'createUserName',
      title: '记录人',
      search: false,
      align: 'center',
      // width: 120,
      ellipsis: true,

    },
    {
      dataIndex: 'createTime',
      title: '记录时间',
      search: false,
      align: 'center',
      // width: 200,
      ellipsis: true,
      render: (text: any) => (
        <span>{moment(text).format('YYYY.MM.DD')}</span>
      )
    },

    {
      dataIndex: 'courseId',
      title: '课程ID',
      search: false,
      align: 'center',
      ellipsis: true,

      // width: 80,
    },
    {
      dataIndex: 'courseName',
      title: '课程名称',
      search: false,
      align: 'center',
      // width: 200,
      ellipsis: true,
    },
    {
      dataIndex: 'duan',
      title: '爱棋道段位',
      search: false,
      align: 'center',
      // width: 200,
      ellipsis: true,
      render: (text: any, record: any) => {
        const { duan } = record
        return <span>{duanOption(duan) || '-'}</span>
      }
    },
  ]
  const onReset = () => {
    setPurpose('')
    setPhoneValue('')
  }
  // 导出
  const exportList = async () => {
    if (itemList?.length == 0) {
      message.destroy();
      message.error('没有可导出的数据')
      return;
    }
    const params = {
      courseId: id,
      uid: phoneValue,
      purpose: purpose
    }
    setLoading(true);
    await courseItemExport({
      exportType: 'exportCourseUserCommunicates',
      map: {
        ...params
      },
      fileName: `${id}_沟通记录 ${moment(new Date()).format('YYYY-MM-DD hh时mm分ss秒')}.xlsx`

    });
    setLoading(false);

  }
  // const [show,setShow]=useState<boolean>(false)
  const ref = useRef<ActionType>()
  return (
    <div className={styles.table1}>

      <XoProTable
        style={{ marginTop: '16px' }}
        columns={columns}
        scroll={{ x: 1000 }}
        hasIndex={false}
        onReset={onReset}
        toolBarRender={() => [
          <Button key="3" loading={loading} onClick={exportList}>
            导出
          </Button>,
        ]}
        actionRef={ref}
        request={async (params: any) => {
          delete params?.nicknamePhone
          const res = await getComRecordsList({ ...params, courseId: id })
          const ids1 = res.result?.records?.map((item: any) => {
            return item.uid
          })
          const ids2 = res.result?.records?.map((item: any) => {
            return item.activityUserId
          })
          setUserId(ids1)
          setId(ids2)
          setRecordsList(res?.result?.records)
          return {
            data: res?.result?.records,
            total: res?.result?.total
          }
        }}
      />
      <DrawerForm
        className={styles.drawer_form}
        visible={shiwForm}
        width="80%"
        drawerProps={{
          footerStyle: { display: 'none' }, closeIcon: false, bodyStyle: { padding: '0' },
          onClose: () => ref.current?.reload()
        }}
        onVisibleChange={(val) => setShowForm(val)}

      >
        <StudentInfo ids={ids} idx={idx} ids3={ids3} />
      </DrawerForm>
    </div>
  )
}
